<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md1">
            <div class="layui-card nav click-but">
                <div class="layui-card-header">长</div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="text">输入框</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="password">密码框</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="select">选择框</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="checkbox_a">复选框</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="checkbox_b">开关</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="radio">单选框</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="textarea">文本域</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="upload">上传组件</button>
                    <button class="layui-btn layui-btn-normal" data-size="block" data-type="submit">提交</button>
                </div>
            </div>
            <div class="layui-card nav">
                <div class="layui-card-header">短</div>
                <div class="layui-card-body">
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="text">输入框</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="password">密码框</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="select">选择框</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="checkbox_a">复选框</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="checkbox_b">开关</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="radio">单选框</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="textarea">文本域</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="upload">上传组件</button>
                    <button class="layui-btn layui-btn-normal" data-size="inline" data-type="submit">提交</button>
                </div>
            </div>

        </div>
        <div class="layui-col-md5">
            <div class="layui-card content">
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-sm layui-btn-danger del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
                </div>
                <div class="layui-card-body code">
                    <form class="layui-form" action="" onsubmit="return false">
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card r-code-html">
                <div class="layui-card-header">html</div>
                <div class="layui-card-body">
                    <textarea name="" class="layui-textarea code-show"></textarea>
                </div>
            </div>
        </div>
    </div>

</div>
<style>
    .layui-fluid {
        margin-top: 15px;
    }

    .content {
        min-height: 796px;
    }

    .nav {
        text-align: center;
    }

    .nav button {
        margin-bottom: 3px;
        width: 80px;
    }

    .layui-card-body .layui-btn+.layui-btn {
        margin-left: 0px;
    }

    .code-show {
        min-height: 454px;
    }

    .js-show {
        min-height: 200px;
    }

    .del-form {
        line-height: initial;
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -15px;
    }
</style>


<script>
    new Wmm({
        imports: ['formBuilder', 'form'],
        listener: function () {
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        },

        init: function () {
            $('.click-but button').click()
            var jscodehtml = formBuilder.jscode();
            $('.js-show').text(jscodehtml)
            formBuilder.delHtml();
            $('button').on('click', function () {
                var _this = $(this),
                    size = _this.data('size'),
                    type = _this.data('type'),
                    html = '';
                key = formBuilder.randStrName();
                switch (type) {
                    case 'text':
                        html = formBuilder.input(type, size)
                        break;
                    case 'password':
                        html = formBuilder.input(type, size)
                        break;
                    case 'select':
                        html = formBuilder.select(size)
                        break;
                    case 'checkbox_a':
                        html = formBuilder.checkbox_a(size)
                        break;
                    case 'checkbox_b':
                        html = formBuilder.checkbox_b(size)
                        break;
                    case 'radio':
                        html = formBuilder.radio(size)
                        break;
                    case 'textarea':
                        html = formBuilder.textarea(size)
                        break;
                    case 'submit':
                        html = formBuilder.submits(size)
                        break;
                    case 'upload':
                        html = formBuilder.upload(size);
                        break;
                    case 'del':
                        $('form').html("\n")
                        formBuilder.delHtml()
                        $('.code-show').text('')
                        return false
                        break;
                    default:
                        layer.msg('类型错误', { icon: 2 })
                }

                $('form').append(html);
                form.render();
                formBuilder.setHtml(html)
            })
        }
    })
</script>